<template>
	<div class="user-modify-bg">
		<div class="col-md-4">
			<div class="user-card user-info">
				<img :src="userInfo.avatar" class="img-thumbnail user-avater img-responsive center-block">
				<div class="text-center user-btn-change">
					<a class="btn btn-success" @click="modifyAvatar">更换头像</a>
				</div>
				<div class="text-center u-info-desc">
					<span class="h4">
						<i class="glyphicon glyphicon-user"></i>
						{{userInfo.email}}
					</span>
					<p>注册于: {{userInfo.created_at}}</p>
					<p>活跃于: {{userInfo.updated_at}}</p>
				</div>
			</div>
			<div class="user-card user-card-second">
				<div class="card-body">
					<a class="btn btn-block" v-for="item in func" :class="{'btn-user-link':checked===item.index}" @click="checked = item.index">
						<i class="glyphicon" :class="item.icon"></i> {{item.title}}
					</a>
				</div>
			</div>
		</div>
		<div class="col-md-8">
			<div class="user-card">
				<div class="card-body">
					<transition name="pull" mode="out-in">
						<basic v-if="show('basic')"></basic>
						<password v-if="show('password')"></password>
						<avatar v-if="show('avatar')"></avatar>
					</transition>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Basic from 'particals/user/bitty/basic'
	import Password from 'particals/user/bitty/password'
	import Avatar from 'particals/user/bitty/avatar'
    import {mapGetters, mapMutations} from 'vuex'

	export default {
		computed: {
            ...mapGetters([
              'user',
              'userInfo'
            ])
        },
		data() {
			return {
				func: [{
					title: '基本信息',
					icon: 'glyphicon-edit',
					index: 'basic'
				},{
					title: '修改密码',
					icon: 'glyphicon-lock',
					index: 'password'
				},{
					title: '更改通知',
					icon: 'glyphicon-bell',
					index: 'notice'
				}],
				checked: 'basic'
			}
		},
		methods: {
			show(type) {
				return this.checked == type && this.userInfo.avatar
			},
			modifyAvatar() {
				this.checked = 'avatar'
			}
		},
		components: {
			Basic,Password,Avatar
		}
	}
</script>
<style lang="scss" scope>
	.user-modify-bg {
		a {
			color: #fff;
		}
		.user-info {
			.user-avater {
				max-width: 100px;
				margin-top: 20px;
				margin-bottom: 10px;
			}
			.user-btn-change {
				margin-bottom: 20px;
			}
			.u-info-desc {
				margin: 0 15px;
				border-top: 1px solid #f6f6f6;
				padding-top: 15px;
				margin-bottom: 10px;
				span {
					display: block;
					margin-bottom: 10px;
				}
				i {
					margin-right: 8px;
				}
			}
		}
		.user-card {
			position: relative;
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-orient: vertical;
		    -webkit-box-direction: normal;
		    -ms-flex-direction: column;
		    flex-direction: column;
		    min-width: 0;
		    word-wrap: break-word;
		    background-color: #fff;
		    background-clip: border-box;
		    border: 1px solid rgba(0,0,0,.125);
		    border-radius: .25rem;
			.card-body {
			    -webkit-box-flex: 1;
			    -ms-flex: 1 1 auto;
			    flex: 1 1 auto;
			    padding: 1.25rem;
			    .btn-user-link {
					background: #f6f6f6;
					color: #7b7b7b !important;
				}
			}
		}
		.user-card-second {
			margin: 20px 0;
			a {
				color: #666;
				&:hover{
					color: #7b7b7b;
				}
			}
		}
		.user-btn-change {
			margin-bottom: 20px;
		}
		.user-first {
			padding-top: 15px;
		}
		.card-header {
			padding-bottom: 15px;
			border-bottom: 1px solid #f6f6f6;
		}
		&:after {
		    clear: both;
		    content: '';
		    display: block;
		}
	}

	.pull-enter-active, .pull-leave-active {
    	transition: all .3s;
	}
	.pull-enter, .pull-leave-active {
		transform: translate3d(5%, 0, 0);
	    opacity: 0;
	}
</style>